import { ScrollView, View, Text, Picker, Image, Input } from '@tarojs/components';
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import "taro-ui/dist/style/components/list.scss";
import youImg from '@/assets/image/my/you.png'
import SendCode from '@/pages/common/send-code';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      houseHoldType: '',
      checked: '',
      dataList: [
        { value: 1, text: '业主' },
        { value: 2, text: '租客' },
        { value: 3, text: '家属' },
      ],
    };
  }

  componentDidMount() {
    this.props.actions.init()
  }

  componentDidShow() { }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  showList(list) {
    let show = [];
    let { checked } = this.state;
    list.map(item => {
      show.push(
        <View
          onClick={() => {
            this.setState({ houseHoldType: item.value, checked: item.value });
          }}
          className='checked'
          style={{ backgroundColor: item.value == checked ? '#218CFF' : '#BFBFBF' }}>
          <Text className='checkedText'>
            {item.text}
          </Text>
        </View>,
      );
    });
    return show;
  }

  render() {
    let { dataList, houseHoldType } = this.state;
    let {
      main: {
        areas,
        city,
        xiaoquArr,
        xiaoquArrAll,
        xiaoqu,
        buildingList,
        buildingListAll,
        buildingName,
        unitList,
        unitListAll,
        unitName,
        houseList,
        houseListAll,
        houseName,
        userName,
        phone
      },
      actions: { action },
    } = this.props;
    return (
      <ScrollView className="packageAAddHouse" scrollY>
        <View style={{ background: '#ffffff', padding: '30rpx' }}>
          <View className='t_title'>
            <Text className='itemStyle'>请选择您的身份</Text>
            <View className='checkedBox'>{this.showList(dataList)}</View>
          </View>
          <View className="from-select t_title">
            <Text className="select-label">选择城市</Text>
            <Picker
              mode='selector'
              range={areas}
              onChange={(e) => {
                action.commonChange('main.city', areas[e.detail.value]);
                //查询小区列表
                action.clearValue(1)
                action.getAppCommunity(areas[e.detail.value])
              }}
              style={{ flex: 1 }}
            >
              <View className='row'>
                <Text className='t_right'>{city ? city : '请选择城市'}</Text>
                <Image className='youImg' src={youImg} mode="widthFix" />
              </View>
            </Picker>
          </View>
          <View className="from-select t_title">
            <Text className="select-label">选择小区</Text>
            <Picker
              mode='selector'
              range={xiaoquArr}
              onChange={(e) => {
                action.commonChange('main.xiaoqu', xiaoquArr[e.detail.value]);
                //查询楼栋列表
                action.clearValue(2)
                action.httpByBuilding(xiaoquArrAll[e.detail.value].id)
              }}
              style={{ flex: 1 }}
            >
              <View className='row'>
                <Text className='t_right'>{xiaoqu ? xiaoqu : '请选择小区'}</Text>
                <Image className='youImg' src={youImg} mode="widthFix" />
              </View>
            </Picker>
          </View>
          <View className="from-select t_title">
            <Text className="select-label">选择楼栋</Text>
            <Picker
              mode='selector'
              range={buildingList}
              onChange={(e) => {
                action.commonChange('main.buildingName', buildingList[e.detail.value]);
                //查询单元列表
                action.clearValue(3)
                action.findByBuildingId(buildingListAll[e.detail.value].id)
              }}
              style={{ flex: 1 }}
            >
              <View className='row'>
                <Text className='t_right'>{buildingName ? buildingName : '请选择楼栋'}</Text>
                <Image className='youImg' src={youImg} mode="widthFix" />
              </View>
            </Picker>
          </View>
          <View className="from-select t_title">
            <Text className="select-label">选择单元</Text>
            <Picker
              mode='selector'
              range={unitList}
              onChange={(e) => {
                action.commonChange('main.unitName', unitList[e.detail.value]);
                //查询房屋列表
                action.clearValue(4)
                action.findByUnitId(unitListAll[e.detail.value].id)
              }}
              style={{ flex: 1 }}
            >
              <View className='row'>
                <Text className='t_right'>{unitName ? unitName : '请选择单元'}</Text>
                <Image className='youImg' src={youImg} mode="widthFix" />
              </View>
            </Picker>
          </View>
          <View className="from-select t_title">
            <Text className="select-label">选择房屋</Text>
            <Picker
              mode='selector'
              range={houseList}
              onChange={(e) => {
                action.commonChange('main.houseName', houseList[e.detail.value]);
                action.commonChange('main.houseId', houseListAll[e.detail.value].id);
              }}
              style={{ flex: 1 }}
            >
              <View className='row'>
                <Text className='t_right'>{houseName ? houseName : '请选择房屋'}</Text>
                <Image className='youImg' src={youImg} mode="widthFix" />
              </View>
            </Picker>
          </View>
          <View className="from-select t_title">
            <Text className="select-label">姓名</Text>
            <View className='row'>
              <Input
                className="mess-text"
                maxlength={8}
                value={userName}
                placeholder="请输入您的姓名"
                placeholder-style="color:#999999;"
                onInput={(e) => {
                  action.commonChange('main.userName', e.detail.value);
                }}
              />
            </View>
          </View>
          <View className="from-select t_title">
            <Text className="select-label">手机号</Text>
            <View className='row'>
              <Input
                className="mess-text"
                maxlength={11}
                value={phone}
                type="number"
                placeholder="请输入您的手机号码"
                placeholder-style="color:#999999;"
                onInput={(e) => {
                  action.commonChange('main.phone', e.detail.value);
                }}
              />
            </View>
          </View>
          <View className="from-select t_title">
            <Text className="select-label">验证码</Text>
            <View className='row'>
              <Input
                style={{ marginRight: '30px' }}
                className="mess-text"
                maxlength={6}
                type="number"
                placeholder="请输入验证码"
                placeholder-style="color:#999999;"
                onInput={(e) => {
                  action.commonChange('main.vCode', e.detail.value);
                }}
              />
              <SendCode
                onClick={async (e) => {
                  return await action.sendCode();
                }}
              />
            </View>
          </View>
        </View>
        <View className="bottom">
          <View className="btn_box">
            <Text className='btn-release'
              onClick={() => {
                action.submitClick(houseHoldType)
              }}
            >确定</Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}
